<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :spacing="7"
    >
      <el-form-item
        label="编码规则名称："
        prop="codingruleName"
        label-width="125px"
      >
        <el-input
          v-model="queryParams.codingruleName"
          placeholder="请输入内容"
        />
      </el-form-item>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/codingRule/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import { deleteCodingRule } from "@/api/systemManage/runningWaterCoding/codingRulesSet.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
  },
  data() {
    return {
      queryParams: {
        codingruleName: "",
      },
      operateArray: [
        {
          name: '编辑',
          icon: 'table-column-edit'
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "codingruleName",
          label: "编码规则名称",
        },
        {
          label: "操作",
          width: "200px",
        },
      ],
      menuOptions: [],
    };
  },

  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    handleAdd() {
      this.$router.push("/systemManage/addCodingRulesCoding");
    },
    onOperate(type, row) {
      if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          deleteCodingRule(row.codingruleId)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      } else {
        this.$router.push({
          path: "/systemManage/addCodingRulesCoding",
          query: { id: row.codingruleId }
        })
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
